<template>
    <div class="app-container home">
      <!-- <el-row :gutter="20">
        <el-col :sm="24" :lg="12" style="padding-left: 20px">
          <h2>{{ systemTitle }}</h2>
        </el-col>
      </el-row>
      <el-divider /> -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="smallCard">
            aaa
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="smallCard">
           bbb
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="smallCard">
          
            ccc
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="smallCard">
            ddd
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="smallCard">
            aaa
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="smallCard">
           bbb
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="smallCard">
          
            ccc
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card class="smallCard">
            ddd
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  // import config from '@/config'
  // import * as echarts from 'echarts'
  // import { parseTime } from '@/utils/ruoyi'
  // import { debounce } from '@/utils/debounce.js'
  // import { getPieList, getBarList, getFaultByDay, getFaultByMonth, getUnHanldedFaultNum } from '@/api/ji-fang-zhi-ban/index'
  // import { getNoticeList } from '@/api/ji-fang-zhi-ban/noticeMgt'
  // import { patrolFindFaultList } from '@/api/ji-fang-zhi-ban/fault/patrolFindFault'
  // import { logbookList, logbookInfo } from '@/api/ji-fang-zhi-ban/logbook'
  // import { getTableList } from '@/api/ji-fang-zhi-ban/reportOnDuty.js'
  // import { getFingerCount } from '@/api/ji-fang-zhi-ban/punchCard'
  // export default {
  //   name: 'Index',
  //   data() {
  //     return {
  //       // 版本号
  //       version: '1.0.0',
  //       activeName: 'first',
  //       leader: '',
  //       manager: '',
  //       mainPeople: '',
  //       subPeople: '',
  //       dtPeople: '',
  //       receivedOtherBusiness: '',
  //       leaderEmphasize: '',
  //       dateTabsValue: '7',
  //       typeTabsValue: '1',
  //       dateRange: [],
  //       date: [],
  //       type: [
  //         {
  //           name: '1',
  //           label: '白班',
  //           value: 'dayShift'
  //         },
  //         {
  //           name: '2',
  //           label: '夜班',
  //           value: 'nightShift'
  //         }
  //       ],
  //       pieList: [],
  //       barData: {},
  //       barList: [],
  //       pieLoading: false,
  //       barLoading: false,
  //       tableData: [],
  //       unHanldedPatrolFindFaultNum: '',
  //       logPeopleInfo: [],
  //       tyPeopleInfo: {},
  //       logDetail: {},
  //       // 日值班人员表格数据
  //       tableDataList: [],
  //       // 日值班人员表格遮罩层
  //       loading: true,
  //       // 查询参数
  //       queryParams: {
  //         dutyDate: parseTime(new Date(), '{yyyy}-{mm}-{dd}'),
  //         noticeDate: parseTime(new Date(), '{yyyy}-{mm}-{dd} 00:00:00')
  //       },
  //       // 通知表格数据
  //       noticeTableDataList: [],
  //       // 通知表格遮罩层
  //       noticeLoading: true,
  //       year: '',
  //       yearOptions: [],
  //       month: '',
  //       // monthOptions: [],
  //       // 未销记人数
  //       peopleCount: '',
  //       today: '',
  //       faultByDayTotal: '',
  //       handleFaultByDayTotal: '',
  //       patrolFoundFaultByDayTotal: '',
  //       monitorByDayTotal: '',
  //       totalDayContrast: '',
  //       handleFaultDayContrast: '',
  //       patrolFoundFaultDayContrast: '',
  //       faultByMonthTotal: '',
  //       handleFaultByMonthTotal: '',
  //       patrolFoundFaultByMonthTotal: '',
  //       monitorByMonthTotal: '',
  //       monitorMonthContrast: '',
  //       totalMonthContrast: '',
  //       handleFaultMonthContrast: '',
  //       patrolFoundFaultMonthContrast: '',
  //       // pie图
  //       pieFirst: '',
  //       // bar图
  //       BarFirst: '',
  //       // 通知类型转换List
  //       noticeTypeList: [],
  //       // 值班类型转换List
  //       dutyTypeList: []
  //     }
  //   },
  //   computed: {
  //     systemTitle() {
  //       return config.title
  //     }
  //   },
  //   created() {
  //     this.getDictList()
  //     this.getList()
  //   },
  //   mounted() {
  //     window.addEventListener('resize', this.resizeChart)
  //   },
  //   methods: {
  //     // 获取字典List数据
  //     getDictList() {
  //       this.getDicts('NOTIFY_TYPE').then(response => {
  //         this.noticeTypeList = response.data
  //       })
  //       this.getDicts('dutyType').then(response => {
  //         this.dutyTypeList = response.data
  //       })
  //     },
  //     // 字典数据翻译
  //     dictFormat(list, value) {
  //       var dictLabel = ''
  //       list.forEach(item => {
  //         if (item.dictValue === value) {
  //           dictLabel = item.dictLabel
  //         }
  //       })
  //       return dictLabel
  //     },
  //     // 表格中行根据处理状态改变颜色
  //     tableRowClassName({ row }) {
  //       let className = ''
  //       if (row.dutyType === 'leaderOnDuty') {
  //         className = 'leader-on-duty-row'
  //       } else if (row.dutyType === 'managementOnDuty') {
  //         className = 'management-on-duty-row'
  //       } else if (row.dutyType === 'deptOnDuty') {
  //         className = 'dept-on-duty-row'
  //       } else if (row.dutyType === 'projectOnDuty') {
  //         className = 'project-on-duty-row'
  //       } else if (row.dutyType === 'projectWatch') {
  //         className = 'project-watch-row'
  //       } else {
  //         className = 'maintenance-on-duty-row'
  //       }
  //       return className
  //     },
  //     noticeTableRowClassName({ row }) {
  //       let className = ''
  //       if (row.notifyType === 'SCHEDULING_COMMANDS') {
  //         className = 'leader-on-duty-row'
  //       } else if (row.notifyType === 'BLACKOUT_NOTICE') {
  //         className = 'management-on-duty-row'
  //       } else if (row.notifyType === 'INFORMATION_CONSTRUCTION') {
  //         className = 'dept-on-duty-row'
  //       } else if (row.notifyType === 'STOP_TICKET') {
  //         className = 'project-on-duty-row'
  //       } else if (row.notifyType === 'EMERGENCY_DRILL') {
  //         className = 'project-watch-row'
  //       } else {
  //         className = 'maintenance-on-duty-row'
  //       }
  //       return className
  //     },
  //     // 序号生成
  //     indexMethod(index) {
  //       return index + 1
  //     },
  //     /** 条件查询值班信息列表 */
  //     getTableDataList() {
  //       this.loading = true
  //       getTableList(this.queryParams).then(response => {
  //         this.tableDataList = response.data
  //         this.loading = false
  //       })
  //     },
  //     /**查询通知列表 */
  //     getNoticeTableDataList() {
  //       this.noticeLoading = true
  //       getNoticeList({ date: this.queryParams.noticeDate }).then(response => {
  //         this.noticeTableDataList = response.data
  //         this.noticeLoading = false
  //       })
  //     },
  //     // Echarts屏幕自适应
  //     resizeChart: debounce(function () {
  //       // this.pieFirst.resize()
  //       // this.BarFirst.resize()
  //     }, 400),
  //     // 初始化数据
  //     getList() {
  //       this.year = parseTime(new Date(), '{yyyy}')
  //       this.month = parseTime(new Date(), '{yyyy}-{mm}')
  //       this.today = parseTime(new Date(), '{yyyy}-{mm}-{dd}')
  //       this.getTableDataList()
  //       this.getNoticeTableDataList()
  //       // 获取未处理巡视故障列表
  //       patrolFindFaultList({ states: 'NORMAL' }).then(res => {
  //         const resultData = res.data || {}
  //         this.tableData = resultData.rows
  //         this.unHanldedPatrolFindFaultNum = resultData.total
  //       })
  //       // 获取Pie图数据
  //       // getPieList({ time: this.month }).then(response => {
  //       //   this.pieLoading = true
  //       //   this.pieList = response.data.seriesData
  //       //   this.echartsPieMake()
  //       // })
  //       // 获取Bar图数据
  //       // getBarList({ time: this.year }).then(response => {
  //       //   this.barData = response.data
  //       //   this.changeBarData(response.data.seriesData, this.barList)
  //       //   this.barLoading = true
  //       //   this.echartsBarMake()
  //       // })
  //       // 获取未销记人数
  //       getFingerCount().then(res => {
  //         this.peopleCount = res.data || '0'
  //       })
  //       // 获取日故障总数
  //       getFaultByDay({ time: this.today }).then(response => {
  //         this.faultByDayTotal = response.data.total
  //         this.handleFaultByDayTotal = response.data.handlingFaultSum
  //         this.patrolFoundFaultByDayTotal = response.data.patrolFaultSum
  //         this.monitorByDayTotal = response.data.monitorSum
  //         this.totalDayContrast = response.data.totalContrast
  //         this.handleFaultDayContrast = response.data.handlingFaultContrast
  //         this.patrolFoundFaultDayContrast = response.data.patrolFaultContrast
  //         // console.log('日故障总数:', response.data)
  //       })
  //       // 获取月故障总数
  //       getFaultByMonth({ time: this.month }).then(response => {
  //         this.faultByMonthTotal = response.data.total
  //         this.handleFaultByMonthTotal = response.data.handlingFaultSum
  //         this.patrolFoundFaultByMonthTotal = response.data.patrolFaultSum
  //         this.monitorByMonthTotal = response.data.monitorSum
  //         this.monitorMonthContrast = response.data.monitorContrast
  //         this.totalMonthContrast = response.data.totalContrast
  //         this.handleFaultMonthContrast = response.data.handlingFaultContrast
  //         this.patrolFoundFaultMonthContrast = response.data.patrolFaultContrast
  //         // console.log('月故障总数:', response.data)
  //       })
  //       this.getLogInfo(parseTime(new Date(), '{yyyy}-{mm}-{dd}'), 'dayShift')
  //       this.setDateRange()
  //       this.setYearRange()
  //     },
  //     // 获取值班日志信息
  //     getLogInfo(date, type) {
  //       logbookList({ onDutyDate: date, onDutyType: type }).then(response => {
  //         this.logPeopleInfo = response.rows
  //         for (let i = 0; i < this.logPeopleInfo.length; i++) {
  //           if (this.logPeopleInfo[i].createBy === 'tyjf') {
  //             this.tyPeopleInfo = this.logPeopleInfo[i]
  //             this.leader = this.logPeopleInfo[i].leaderOnDutyName || '-'
  //             this.manager = this.logPeopleInfo[i].directorOnDutyName || '-'
  //             this.mainPeople = this.logPeopleInfo[i].currPrimaryOnDutyPersonName || '-'
  //             this.subPeople = this.logPeopleInfo[i].currSecondOnDutyPersonName || '-'
  //           } else {
  //             this.dtPeople = this.logPeopleInfo[i].currPrimaryOnDutyPersonName || '-'
  //           }
  //         }
  //         if (this.tyPeopleInfo.id) {
  //           logbookInfo(this.tyPeopleInfo.id).then(res => {
  //             this.logDetail = res.data
  //             this.receivedOtherBusiness = this.logDetail.dictData.hand_over_other_business.dictValue || '-'
  //             this.leaderEmphasize = this.logDetail.dictData.leader_emphasize.dictValue || '-'
  //           })
  //         } else {
  //           this.$message({
  //             showClose: true,
  //             message: '暂无当前值班信息！',
  //             center: true,
  //             type: 'warning'
  //           })
  //           // console.log('暂无当前值班信息!')
  //         }
  //       })
  //     },
  //     // 获取近一周日期
  //     setDateRange() {
  //       for (let i = 6; i >= 0; i--) {
  //         let start = new Date()
  //         start.setTime(start.getTime() - 3600 * 1000 * 24 * i)
  //         start = parseTime(start, '{yyyy}-{mm}-{dd}')
  //         this.dateRange.push(start)
  //       }
  //       const date = []
  //       this.dateRange.forEach(function (item, index) {
  //         date.push({ label: item.substr(5), name: '' + (index + 1), value: item })
  //       })
  //       this.date = date
  //       // console.log('最近一周', this.date)
  //     },
  //     // 获取近五年年份
  //     setYearRange() {
  //       for (let i = 0; i < 5; i++) {
  //         let start = parseTime(new Date(), '{yyyy}')
  //         start = start - i
  //         this.yearOptions.push({ dictLabel: start, dictValue: start })
  //       }
  //     },
  //     // 切换年份
  //     selectYear(val) {
  //       this.year = val
  //       this.barData = {}
  //       this.barList = []
  //       getBarList({ time: this.year }).then(response => {
  //         this.barData = response.data
  //         this.changeBarData(response.data.seriesData, this.barList)
  //         this.barLoading = true
  //         this.echartsBarMake()
  //       })
  //       console.log('年份', val)
  //     },
  //     // 交待事项Tab切换点击方法
  //     handleMatterClick(tab, event) {
  //       // console.log('切换事项')
  //     },
  //     // 日期Tab切换点击方法
  //     handleDateClick(tab) {
  //       this.dataReset()
  //       this.typeTabsValue = '1'
  //       this.dateTabsValue = tab.name
  //       this.getLogInfo(this.date[this.dateTabsValue - 1].value, this.type[this.typeTabsValue - 1].value)
  //     },
  //     // 白班夜班Tab切换点击方法
  //     handleTypeClick(tab) {
  //       this.dataReset()
  //       this.typeTabsValue = tab.name
  //       this.getLogInfo(this.date[this.dateTabsValue - 1].value, this.type[this.typeTabsValue - 1].value)
  //     },
  //     // 切换时重置数据
  //     dataReset() {
  //       this.tyPeopleInfo = {}
  //       this.leader = ''
  //       this.manager = ''
  //       this.mainPeople = ''
  //       this.subPeople = ''
  //       this.dtPeople = ''
  //       this.logDetail = {}
  //       this.receivedOtherBusiness = ''
  //       this.leaderEmphasize = ''
  //     },
  //     // Bar图数据转换方法
  //     changeBarData(data, list) {
  //       for (let i = 0; i < data.length; i++) {
  //         list.push({
  //           name: data[i].name,
  //           type: 'bar',
  //           // stack: 'Ad',
  //           tooltip: {
  //             valueFormatter: function (value) {
  //               return value + ' 次'
  //             }
  //           },
  //           // emphasis: {
  //           //   focus: 'series'
  //           // },
  //           data: data[i].data
  //         })
  //       }
  //     },
  //     // 绘制Bar图
  //     echartsBarMake() {
  //       // Bar图绘制
  //       this.BarFirst = echarts.init(this.$refs.BarFirst)
  //       const BarFirst = this.BarFirst
  //       const BarOption = {
  //         tooltip: {
  //           trigger: 'axis'
  //         },
  //         toolbox: {
  //           feature: {
  //             // dataView: { show: true, readOnly: false },
  //             magicType: { show: true, type: ['line', 'bar'] },
  //             // restore: { show: true },
  //             saveAsImage: { show: true }
  //           }
  //         },
  //         legend: {
  //           data: this.barData.legend
  //         },
  //         xAxis: [
  //           {
  //             type: 'category',
  //             data: this.barData.xaxisData,
  //             axisLabel: {
  //               formatter: '{value} 月'
  //             },
  //             axisPointer: {
  //               type: 'shadow'
  //             }
  //           }
  //         ],
  //         yAxis: [
  //           {
  //             type: 'value',
  //             name: '',
  //             axisLabel: {
  //               formatter: '{value} 次'
  //             }
  //           }
  //         ],
  //         series: this.barList
  //       }
  //       BarFirst.setOption(BarOption)
  //       this.barLoading = false
  //     },
  //     // 绘制pie图
  //     echartsPieMake() {
  //       // 故障类型分布图pie图绘制
  //       this.pieFirst = echarts.init(this.$refs.pieFirst)
  //       const pieFirst = this.pieFirst
  //       // pie图(一)参数
  //       const optionFirst = {
  //         // title: {
  //         //   text: '故障类型分布图',
  //         //   left: 'left'
  //         // },
  //         tooltip: {
  //           trigger: 'item',
  //           formatter: '{a} <br/>{b} : {c} ({d}%)'
  //         },
  //         toolbox: {
  //           show: true,
  //           feature: {
  //             // dataView: { show: true },
  //             saveAsImage: {}
  //           }
  //         },
  //         series: [
  //           {
  //             name: '数量',
  //             type: 'pie',
  //             // roseType: 'radius',
  //             radius: [90, 140],
  //             center: ['50%', '50%'],
  //             data: this.pieList,
  //             itemStyle: {
  //               borderRadius: 5
  //             },
  //             animationEasing: 'cubicInOut',
  //             animationDuration: 1000
  //           }
  //         ]
  //       }
  //       pieFirst.setOption(optionFirst)
  //       this.pieLoading = false
  //     }
  //   },
  //   beforeDestroy() {
  //     window.removeEventListener('resize', this.resizeChart)
  //   }
  // }
  // </script>
  
  // <style scoped lang="scss">
  // ::v-deep .el-table .leader-on-duty-row {
  //   background: #ee666657;
  //   cursor: pointer;
  // }
  // ::v-deep .el-table .management-on-duty-row {
  //   background: #ffac002b;
  //   cursor: pointer;
  // }
  
  // ::v-deep .el-table .dept-on-duty-row {
  //   background: #5470c65e;
  //   cursor: pointer;
  // }
  // ::v-deep .el-table .project-on-duty-row {
  //   background: #853ba25c;
  //   cursor: pointer;
  // }
  
  // ::v-deep .el-table .project-watch-row {
  //   background: #13ce6657;
  //   cursor: pointer;
  // }
  // ::v-deep .el-table .maintenance-on-duty-row {
  //   background: #2cb8e257;
  //   cursor: pointer;
  // }
  
  .selectClass {
    width: 150px;
  }
  .greenColor {
    color: green;
  }
  .redColor {
    color: red;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }
  .smallCard {
    height: 300px;
  }
  .miniCard {
    // height: 12%;
  }
  .echartsCard {
    height: 50%;
  }
  .labelClass {
    font-size: 20px;
    background: #e1f3d8;
  }
  .contentClass {
    font-size: 20px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .carouselClass {
    padding: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .my-label {
    background: #e1f3d8;
  }
  
  .my-content {
    background: #fde2e2;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #f5f5f0;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #edf2f3;
  }
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }
  
    ul {
      padding: 0;
      margin: 0;
    }
  
    font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;
  
    ul {
      list-style-type: none;
    }
  
    h4 {
      margin-top: 0px;
    }
  
    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }
  
    p {
      margin-top: 10px;
  
      b {
        font-weight: 700;
      }
    }
  
    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
  .zbryrtjTableClass {
    margin-top: 10px;
    max-height: 525px !important;
    overflow-y: auto;
  }
  .zytzTableClass {
    width: 100%;
    margin-top: 10px;
    max-height: 525px !important;
    overflow-y: auto;
  }
  .jfsbgjTableClass {
    width: 100%;
    max-height: 230px !important;
    overflow-y: auto;
  }
  </style>
  